<!-- 补考成绩详情-->
<template>
  <div class="scorddetail">
    <el-card>
      <h3 style="text-align: center; margin: 20px 0">补考成绩详情</h3>
      <el-descriptions
        class="container"
        :labelStyle="ls"
        :contentStyle="cs"
        :column="1"
        :size="size"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <span>学生姓名</span>
          </template>
          {{ tableData[0].studentName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 学生性别 </template>
          {{
            tableData[0].gender == 0
              ? "男"
              : tableData[0].gender == "1"
              ? "女"
              : "男"
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 学生学号 </template>
          {{ tableData[0].studentIds }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="container">
        <el-table :data="tableData" border class="table">
          <el-table-column prop="subject" label="科目"> </el-table-column>
          <el-table-column prop="grade" label="分数"></el-table-column>
          <el-table-column label="评分" prop="score"> </el-table-column>
          <el-table-column label="是否补考" prop="whether"> </el-table-column>
        </el-table>

        <el-button class="setBtn" type="info" @click="$router.go(-1)"
          >关闭</el-button
        >
      </div>
    </el-card>
  </div>
</template>
<script>
import { makeUpExamInfo } from "@/api/achievement/standards.js";
export default {
  data() {
    return {
      size: "medium ",
      cs: {
        width: "522px",
        "word-break": "break-all",
      },
      ls: {
        "word-break": "keep-all",
      },

      tableData: [],
    };
  },
  mounted() {
    this.makeUpExamList();
  },
  methods: {
    async makeUpExamList() {
      try {
        const res = await makeUpExamInfo({ id: this.$route.params.id });
        if (res.code == 200) {
          this.tableData.push(res.data);
          console.log(this.tableData);
        } else {
          this.$message.error("数据获取失败,请稍后重试", res.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  text-align: center;
  width: 700px;
  margin: 0 auto;
  .table {
    min-height: 300px;
  }
  .setBtn {
    margin-top: 20px;
    display: inline-block;
  }
}
/* el-descriptions-item 文字居中 */
::v-deep
  .el-descriptions__body
  .el-descriptions__table
  .el-descriptions-item__cell {
  text-align: center;
}
</style>
